<template>
  <div class="items">
    <router-link
      active-class="active"
      class="list-group-item"
      to="/solution/accident/index"
      >Accident</router-link
    >
    <router-link
      active-class="active"
      class="list-group-item"
      to="/solution/wasteChemical"
      >WasteChemical</router-link
    >
    <router-link
      active-class="active"
      class="list-group-item"
      to="/solution/chemical"
      >Chemical</router-link
    >
    <router-link
      active-class="active"
      class="list-group-item"
      to="/solution/equipment"
      >Equipment</router-link
    >
    <router-link
      active-class="active"
      class="list-group-item"
      to="/solution/consumable"
      >Consumable</router-link
    >
    <router-link
      active-class="active"
      class="list-group-item"
      to="/solution/experimentalPersonnel/index"
      >ExperimentalPersonnel</router-link
    >
  </div>
  <div class="panel-body">
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts" name="App"></script>

<style scoped>
.items {
  background-color: skyblue;
  float: left;
  width: 180px;
  margin-top: 40px;
}
.panel-body {
  float: right;
  margin-top: 40px;
  width: calc(100% - 200px);
}
</style>
